@import "common.scss";

// 头部公共部分
.s-header{
    width: 100%;
    height: 40px;
    background-color: #de2810;
    .header-wrap{
        @include typeArea();
        height: 100%;
        // background-color: pink;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .header-l{
            width: 297px;
            height: 40px;           
            .nl-li{
                float: left;
                margin-right: 20px;
                line-height: 40px;
                a{
                    font: $font2;
                    color: $cool;
                }
            }
        }
        .nav-r{
            height: 40px;
            .nr-li{
                float: left;
                margin-left: 20px;
                line-height: 40px;
                a{
                    font: $font2;
                    color: $cool;
                }
            }
        }
    }
}

.navwrap{
    width: 100%;
    height: 102px;
    border-bottom: 1px solid #333;
.navwrapper{
        @include typeArea();
        height: 100%;
        // background-color: aqua;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .navsearch-l{
            .logo{
                width: 180px;
                height: 36px;
                vertical-align: middle;
                margin-right: 40px;
            }
            a{
                font-size: 18px;
                color: #333;
                margin-right: 50px;
            }
        }
        .navsearch-r{
            .searchBar{
                width: 420px;
                height: 36px;
                border: 1px solid #ccc;
                padding: 5px 30px;
                border-radius: 18px;
                input{
                    width: 340px;
                    height: 24px;
                }
                .icon-sousuo{
                    cursor: pointer;
                }
            }
            .searchlist {
                margin-left: 20px;
                a{
                    font-size: 12px;
                color: #666;
                padding-right: 20px;
                }
            }
        }
}
}

.mainWrapper{
    .s-wrap{
        width: 100%;
        background-color: #fff;
        height: 192px;
        .searchBoss{
            @include typeArea();
            .searchBox{
                .searchNav{
                    height: 48px;
                    line-height: 48px;
                    border-bottom: 1px solid #e8e8e8;
                    .default_path{
                        a{
                            font-size: 14px;
                            color: #848484;
                        }
                    }
                }
            }
            .filterBox{
                background-color: #fff;
                font-size: 14px;
                .classify,.translate,.opt{
                    width: 100%;
                    height: 48px;
                    // line-height: 48px;
                    border-bottom:1px solid #e8e8e8; ;
                }
                .classify,.translate{
                    .hint{
                        display: block;
                        width: 60px;
                        line-height: 48px;
                        text-align: center;
                        float: left;
                        color: #31373c;
                        text-align: left;
                    }
                    .option_box{
                        height: 48px;
                        float: left;
                        a{
                            color: #848484;                           
                            display:inline-block;
                            width: 100px;
                            margin-right: 15px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            line-height: 48px;
                        }
                    }
                }
                .opt{
                    .hint{
                        display: block;
                        width: 60px;
                        line-height: 48px;
                        text-align: center;
                        float: left;
                        color: #31373c;
                        text-align: left;
                    }
                    .orderColBox,.orderTypeBox{
                        height: 48px;
                        float: left;
                        label{
                            display: inline-block;
                            width: 115px;
                            line-height: 48px;
                            text-align: left;
                            color: #848484;
                        }
                    }
                    .showNumBox{
                        float: left;
                        line-height: 48px;
                    }
                }
            }
        }
    }
    .listBox{
        background-color: #f5f5f5;
        width: 100%;
        padding-top: 8px;
        overflow: hidden;
        
        .listBoss{
            @include typeArea();
            .goodsList{
                width: 100%;
                display: flex;
                justify-content: flex-start;
                flex-wrap: wrap;
                .list-item:hover{
                    border: 1px solid #FC0D1B;

                }
                .list-item{
                    width:18%;
                    height: 295px;
                    margin:5px 5px 15px;
                    border: 1px solid #E4E4E4;
                    background-color: #fff;
                    overflow: hidden;
                    .imgBox{
                        width: 165px;
                        height: 165px;
                        margin: 0 auto;
                        margin-top: 30px;
                        margin-bottom: 10px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .name{
                        color: #31373c;
                        font-size: 14px;
                        height: 24px;
                        line-height: 24px;
                        margin: 0 auto;
                        overflow: hidden;
                        text-align: center;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                        width: 90%;
                    }
                    .price{
                        color: #fa5437;
                        font-size: 14px;
                        line-height: 36px;
                        margin-top: 5px;
                        text-align: center;
                    }
                }
            }
        }
        .pageBox{
            @include typeArea();
            margin-top: 40px;
            margin-left: 42%;
            height:75px;
            user-select: none;
            .prev,.next,.pageTips{
                border: 1px solid #ddd;
                background-color: #fff;
                height: 30px;
                line-height: 30px;
                padding:6px 12px;
                margin-right: 6px;
            }
            .next:hover{
                border: 1px solid #23ac38;
                color: #23ac38;
                cursor: pointer;
            }
            .prev:hover{
                border: 1px solid #23ac38;
                color: #23ac38;
                cursor: pointer;
            }
        }
    }
}



// 底部公共部分
.footer-top{
	
	min-height: 350px;
	background-color: #fff;
	color: #333;
	padding: 60px 0;
	.ftWrap{
		@include typeArea();
		.aboutbox{
			width: 320px;
			float: left;
			margin-right: 100px;
			.helpTitle{
				font-size: 18px;
				color: #333;
				line-height: 30px;
				font-weight: 700;
				margin-bottom: 27px;
			}
			.helpText{
				font-size: 14px;
				line-height: 24px;
				margin-bottom: 6px;
				// border-bottom: 1px solid #333;
			}
		}
		.linkbox{
			float: left;
    		margin-right: 100px;
    		text-align: left;
			margin-right: 100px;
			.helpTitle{
				font-size: 18px;
				color: #333;
				line-height: 30px;
				font-weight: 700;
				margin-bottom: 27px;
			}
			a{
				display: block;
    			font-size: 14px;
    			line-height: 24px;
				color: #666;
    			margin-bottom: 6px;
			}
		}
		.contentbox{
			border-left: 1px solid #979797;
    		float: right;
    		min-height: 230px;
    		text-align: center;
    		width: 300px;
			.helpTitle{
				font-size: 18px;
				color: #333;
				line-height: 30px;
				font-weight: 700;
				margin-bottom: 27px;
			}
			.bigText{
				font-weight: 700;
    			font-size: 28px;
    			line-height: 30px;
			}
			.smallText{
				color: #999;
    			font-size: 14px;
    			line-height: 30px;
			}
		}
	}
}
.footer-bottom{
	background: #333;
	color: #fff;
	.fbWrap{
		@include typeArea();
		.fbtBox{
			@include typeArea();
			// margin-left: 200px;
            text-align: center;
			height: 80px;
			// border-bottom: 1px solid #666;
  			padding: 25px 0;
			  a{
				color: #fff;
				display: inline-block;
				font-size: 24px;
				line-height: 30px;
				margin-right: 150px;
				vertical-align: top;
				span{
					font: inherit;
				}
			  }
		}
		.fbBbox{
			font-size: 14px;
    		line-height: 20px;
    		padding: 18px 0 21px;
    		text-align: center;
			.fb-top{
				color: #fff;
			}
			.fb-bottom{
				color: rgba(255,255,255,.5);
				 font-size: 12px;
			}
		}
	}
}